<template>
  <div :id="breadcrumbId" :style="{top: '0', height: '60px', left: asideMenuCollapsed ? '64px' : '250px'}"
       class="breadcrumb-container">
    <div class="height-100">
      <div class="display-flex flex-justify-start">
        <div class="flex-col">
          <el-breadcrumb class="display-inline-block" :style="{lineHeight: title ? 0 : '60px'}">
            <el-breadcrumb-item v-for="(item, idx) in breadcrumb" :key="idx">
              <div :class="getBreadcrumbClass(idx)" class="header5 display-inline" @click="breadcrumbClicked(item)">
                {{item.title}}
              </div>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div v-if="title" class="title">{{title}}</div>
        </div>
      </div>
    </div>
    <div class="breadcrumb-opt-container">
      <div v-if="!opt.hide" v-for="opt in optData" :key="opt.label" class="breadcrumb-opt-item-container">
        <div v-if="opt.type === 'btn'" class="breadcrumb-opt-btn-container" @click="opt.callback">
          <div class="breadcrumb-opt-btn-content">
            <i :class="[opt.icon]" class="iconfont font-size-16 display-block"></i>
            <div class="font-size-12 mar-top-5">{{opt.label}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex';

  const elementResizeDetectorMaker = require('element-resize-detector');

  export default {
    name: 'Breadcrumb',
    props: {
      optData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      title: {
        type: String,
        default: ''
      },
      showTips: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        breadcrumbId: 'breadcrumbId',
      };
    },
    computed: {
      ...mapState({
        asideMenuCollapsed: state => state.client.asideMenuCollapsed,
      }),
      breadcrumb() {
        const {displayMap = ''} = this.$route.meta;
        const breadcrumb = this.$route.meta.breadcrumb || [];
        return displayMap ? breadcrumb : this.$route.meta.breadcrumb || [];
      },
    },
    mounted() {
      this.calculateHeight();
    },
    methods: {
      ...mapActions(['updateBreadcrumbHeight']),
      // 监听面包屑高度变化
      calculateHeight() {
        const breadcrumb = document.getElementById(this.breadcrumbId);
        if (!breadcrumb) return;
        const erd = elementResizeDetectorMaker();
        erd.listenTo(breadcrumb, (element) => {
          this.updateBreadcrumbHeight(element.offsetHeight);
        });
      },
      getBreadcrumbClass(idx) { // 当前层次结构的样式
        const item = this.breadcrumb[idx];
        if (!item) return;
        const font = idx === 0 ? 'font-weight-bold' : 'font-weight-normal font-gray-60';
        const cursor = item.name ? 'cursor-pointer font-hover-primary' : '';
        return `${font} ${cursor}`;
      },
      breadcrumbClicked(item = {}) { // 点击当前层次之后路由跳转
        if (!item.name) return;
        this.$router.push({name: item.name, params: this.$route.params, query: this.$route.query});
      },
      goBack() {
        if (!this.showTips) return this.breadcrumbClicked(this.breadcrumb[0]);
        this.$emit('breadcrumbGoBackTips');
      }
    }
  };
</script>

<style scoped lang="less">
  .title {
    height: 20px;
    margin-top: 10px;
    color: #666;
    font-weight: 500;
    font-size: 14px;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;

  }

  .breadcrumb-container {
    position: fixed;
    right: 0;
    z-index: 2000;
    background: @colorWhite;
    padding: 0 0 0 24px;
    border-bottom: 1px solid #eee;

    .breadcrumb-title-container {
      position: relative;
      margin-top: 15px;
    }

    .breadcrumb-subtitle {
      font-size: @sizeSecond;
      color: @colorGray60;
      margin-top: 10px;
    }

    .breadcrumb-back-icon {
      position: absolute;
      left: 0;
      top: 3px;
      cursor: pointer;
      color: @colorGray40;
    }

    .breadcrumb-back-icon:hover {
      color: @colorPrimary;
    }

    .breadcrumb-title:hover {
      cursor: pointer;
      color: @colorPrimary;
      text-decoration: underline;
    }

    .breadcrumb-opt-container {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;

      .breadcrumb-extra-title {
        font-size: @sizeMain;
        color: @colorGray40;
        display: table-cell;
        vertical-align: middle;
      }

      .breadcrumb-opt-item-container {
        display: inline-block;
        height: 100%;

        .breadcrumb-opt-btn-container {
          padding: 0 20px;
          color: @colorPrimary;
          height: 100%;
          display: table;
          cursor: pointer;

          .breadcrumb-opt-btn-content {
            display: table-cell;
            vertical-align: middle;
            text-align: center
          }
        }

        .breadcrumb-opt-btn-container:hover {
          background: @colorPrimary;
          color: @colorWhite;
          font-weight: bold;
        }
      }
    }

  }
</style>
